/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="kill-time">
		    <block v-for="(item,index) in killtime" :key="index">
		        <view :class="[index==timeac?'timeac':'']" :data-index="index" @tap="changeTimeAc">
		            <view>{{item.font}}</view>
		            <view v-if="index==0">秒杀中</view>
		            <view v-else>即将秒杀</view>
		        </view>
		    </block>
		</view>
		<view class="kill-list">
		    <block v-for="(item,index) in goodlist" :key="index">
		        <view class="kill-item">
		            <navigator class="kill-pic" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id+'&item_id='+item.item_id"><image class="wh100" :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType"></image></navigator>
		            <view class="kill-cont">
		                <navigator class="goods-name ellipsis-2" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id+'&item_id='+item.item_id">{{item.goods_name}}</navigator>
		                <view class="goods-num">
		                    <view>
		                        <view class="co-red">￥{{item.price}}</view>
		                        <view class="underline">￥{{item.shop_price}}</view>
		                    </view>
		                    <view class="kill-btn">
		                        <navigator v-if="timeac == 0 && item.percent != 100" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id+'&item_id='+item.item_id">去抢购</navigator>
		                            <navigator class="gray" v-else :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id">去购买</navigator>
		                        <navigator v-if="item.percent == 100" class="gray">已售罄</navigator>
		                        <view class="classname">已抢{{item.percent}}%</view>
		                    </view>
		                </view>
		            </view>
		        </view>
		    </block>
		</view>
		<view class="no-more">没有更多</view>
	</view>
</template>

<script>
	import config from "@/api/config.js";
	import common from "@/common/common.js";
	import {getSeckill} from "@/api/api.js";
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				hostUrl:config.host,
				goodlist:[],
				killtime:"",
				start_time:"",//第一组开始时间
				end_time:"",//第一组结束时间
				timeac:"0",//默认选择0
				total:"",//数据条数
				params:{
					"recommend":"",
					"status":1,//状态必须是1
					"start_time":"",//偶数级时间例如 12,16
					"end_time":"",
					"p":1,
				}
			};
		},
		computed: {
			...mapState(['goodsImgWidth','goodsImgHeight','imgType'])
		},
		onLoad(){
			this.getime()
			
			this.getSeckill(this.params)
			
		},
		methods:{
			/*秒杀数据*/ 
			getSeckill(params){
				getSeckill(params).then(res=>{
					if(res){
						this.goodlist=this.goodlist.concat(res.records);
						this.total=res.toatl
					}
					// console.log(res)
				})
			},
			/*切换*/ 
			changeTimeAc(e){
				console.log(e)
				this.goodlist.length=0;
				this.params.p=1;
				let index=e.currentTarget.dataset.index;
				this.params.start_time=this.killtime[index].start_time;
				this.params.end_time=this.params.start_time+7200;
				this.timeac=index;
				this.getSeckill(this.params)
				
			},
			/*获取当前时间戳*/
			getime(){
					var t = new Date();
					var time = parseInt(t.getTime()/1000);//当前时间
					
					var now=common.format(time) //转换后的时间   2020-01-13 18:00:00
					var num=now.indexOf(":");
					var sub=now.substring(0, num)
					
					var sublsat=sub.substring(sub.length-2) //后两位数
					if(parseInt(sublsat%2) !=0){ //获取准点场次
						sublsat=sublsat-1
					}
					if(sublsat=="24"){ //24为0时
						sublsat=0
					}
					this.session=sublsat
					// console.log(sub,sub1)
					var parameter=sub.replace(sub.substring(sub.length-2),sublsat) + ":00:00";
					console.log(parameter)
					var date=new Date(parameter).getTime();
					this.params.start_time=parseInt(date/1000)
					this.params.end_time=this.params.start_time+7200;
					var timer=[];
					/*循环5次获取5个时间段*/ 
					var newtimer=[]
					for(var i=0;i<5;i++){
						var ts={}
						ts.start_time=this.params.start_time+7200 * i
						timer.push(ts)
					}
					timer.forEach((i,index)=>{
						let now=common.format(i.start_time) //转换后的时间   2020-01-13 18:00:00
						let num=now.indexOf(":");
						let sub=now.substring(0, num)
						
						let sublsat=sub.substring(sub.length-2)+":00:00"
						if(sublsat=="24:00:00"){
							sublsat="00:00:00"
						}
						i.font=sublsat
					})
					
					this.killtime=timer;
					
					
				
			},
			onReachBottom(){//下拉加载数据
				
				if(this.goodlist.length===this.total){
					common.toast("none","加载完了",2000)
					
					 return false;
				}
				this.params.p++;
				this.getSeckill(this.params)
			},
		}
		
	}
</script>

<style lang="scss">
/* seckill_list.wxss */
.kill-time{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 90rpx;
    border-bottom:1px solid #f3f3f3;
    border-top:1px solid #f3f3f3;
    background-color: #fff; 
}
.kill-time>view{
    width: 20%;
    text-align: center;
    line-height: 30rpx;
    font-size: 24rpx;
    color: #666;
}
.kill-time>.timeac{
    color: #ff3b3b;
}
.kill-item{
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding:10rpx 20rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    width: 710rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
}
.kill-pic{
    width: 200rpx;
    height: 200rpx;
}
.kill-cont{
    width: 440rpx;
}
.goods-name{
    height: 96rpx;
    line-height: 48rpx;
    font-size: 24rpx;
    color: #666;
}
.goods-num{
    padding-top: 10rpx;
    display: flex;
    justify-content: space-between;
    line-height: 42rpx;
    font-size: 24rpx;
    color: #999;
}
.goods-num .co-red{
    font-size: 30rpx;
    font-weight: bold;
}
.underline{
    text-decoration: line-through;
}
.kill-btn{
    text-align: right;
}
.kill-btn>navigator{
    padding:0 20rpx;
    background: #ff3b3b;
    color: #fff;
}
.kill-btn .gray{
    background-color: #666; 
}
.no-more{
    font-size: 28rpx;
    line-height: 2;
    text-align: center;
    color: #666;
}

</style>
